<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="format-detection" content="telephone=no" />
  <meta name="format-detection" content="email=no" />
  <title>首页</title>
  <link rel="stylesheet" href="../../css/api.css">
  <link rel="stylesheet" href="../../css/vant.css">
  <link rel="stylesheet" href="../../css/main.css">
  <style>
    .van-tabs {
      background: #fff;
    }

    .van-tabs__wrap {
      padding: 0 1rem;
    }

    pre {
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  </style>
</head>

<body>
  <div class="app my-store" v-cloak>
    <div class="my-store">
      <div class="division-line"></div>
      <van-collapse v-model="activeNames">
        <van-collapse-item title="店铺简介" name="1">
          <div class="collapse">
            <pre>{{storeInfo.shopIntro}}</pre>
          </div>
        </van-collapse-item>
      </van-collapse>
      <div class="division-line"></div>
      <div class="swipe" v-if="listBanner.length>0">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :stop-propagation="false">
          <van-swipe-item v-for="(item,index) in listBanner" :key="index" class="flex-x-c swipe-item">
            <img v-if="!item.playURL" :src="item.imageUrl" alt=""  @click="goWeb(item)">
            <div v-else>
              <div class="videoPlay main-img">
                  <video :id="'player'+index" class="main-img" height="100rem" controls="true"
                      preload="none" webkit-playsinline="true" playsinline="true"
                      :poster="banner.imageUrl" x5-playsinline>
                      <source :src="banner.playURL" type="video/mp4" />
                  </video>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <van-tabs v-model="active" animated swipeable color="#3F8CEC" title-active-color="#3F8CEC" line-height="1px"
        @click="toggle">
        <van-tab title="推荐">
          <div class="store-list">
            <div class="store-item flex-x-s" v-for="(item,index) in listproduct" :key="index" @click="goPage(item)">
              <div class="store-item-left">
                <img v-lazy="item.imageUrl" alt="">
              </div>
              <div class="store-item-right">
                <div class="store-item-right-f1">
                  {{item.title}}
                </div>
                <div class="store-item-right-f2">
                  {{item.brandName}}
                </div>
                <div class="store-item-right-f3">
                  <span v-if="item.price<10000 && item.price!==null" class="moneyUnit">¥</span>
                  <span>{{item.price | filterPrice}}</span>
                </div>
              </div>
              <div class="line"></div>
            </div>
            <div class="collect-empty" v-if="listproduct.length===0">
              <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
              <div>暂无商品～</div>
            </div>
          </div>
        </van-tab>
        <van-tab title="新品">
          <div class="store-list">
            <div class="store-item flex-x-s" v-for="(item,index) in listproduct" :key="index" @click="goPage(item)">
              <div class="store-item-left">
                <img v-lazy="item.imageUrl" alt="">
              </div>
              <div class="store-item-right">
                <div class="store-item-right-f1">
                  {{item.title}}
                </div>
                <div class="store-item-right-f2">
                  {{item.brandName}}
                </div>
                <div class="store-item-right-f3">
                  <span v-if="item.price<10000 && item.price!==null" class="moneyUnit">¥</span>
                  <span>{{item.price | filterPrice}}</span>
                </div>
              </div>
              <div class="line"></div>
            </div>
            <div class="collect-empty" v-if="listproduct.length===0">
              <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
              <div>暂无商品～</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>

    </div>
  </div>
  <script src="../../script/api.js"></script>
  <script src="../../script/flexible.js"></script>
  <script src="../../script/fastclick.js"></script>
  <script src="../../script/vue.min.js"></script>
  <script src="../../script/iconfont.js"></script>
  <script src="../../script/restful.js"></script>
  <script src="../../script/common.js"></script>
  <script src="../../script/vant.min.js"></script>
  <script src="../../script/businessCommon.js"></script>
  <script src="../../script/vue-lazyload.js"></script>
  <script>
    apiready = function () {
      imgLazyLoad();
      vm = new Vue({
        el: '.app',
        data: {
          activeNames: ['1'],
          active: 0,
          hasNext: true,
          isShowCollapse: true,
          storeInfo: [],
          listBanner: [],
          listproduct: [],
          // 列表查询参数
          queryParam: {
            types: [0, 1, 2], // types 类型：0设备售卖 1设备出租 2配件
            location: null,
            newed: null,
            orderBy: null,
            pageNum: 1,
            pageSize: 3,
            queryOwn: null,
            recommended: true,
            status: 1,
            checkStatus: 1,
            userId: null,
          },
        },
        mounted() {
          // var h = document.querySelector('.collapse').clientHeight
          // document.querySelector('.collapse').style.height= h +'px'
          // var location = $api.getStorage('location_home') || {}
          var location = api.getPrefs({
                            sync: true,
                            key: 'location_home'
                        })||{}
          this.queryParam.location = JSON.parse(location).location;
          this.storeInfo = api.pageParam.storeInfo
          if (api.pageParam.queryOwn) {
            this.queryParam.queryOwn = true
          } else {
            this.queryParam.userId = this.storeInfo.userId
          }
          this.getBanner(this.storeInfo.shopId)
          this.getListProducts()
        },
        filters: {
          filterPrice: filterPrice
        },
        methods: {
          // 打开外链
          goWeb(banner) {
              if (banner.targetType == 0) {
                  api.openWin({
                      name: 'goods_detail_win',
                      url: '../whole_sale/goods_detail_win.html',
                      bounces: false,
                      pageParam: {
                          id: banner.target,
                          from: 'banner'
                      }
                  });
              } else if (banner.targetType == 1) {
                  api.openWin({
                      name: 'web_win',
                      url: '../web/web_win.html',
                      bounces: false,
                      pageParam: {
                          url: banner.target
                      }
                  });
              }
          },
          goPage(item) {
            api.openWin({
              name: "goods_detail_win",
              url: "../whole_sale/goods_detail_win.html",
              bounces: false,
              reload: true,
              pageParam: {
                detailItem: item,
                title: 'SELL_DEVICE',
                module: 'SELL_DEVICE'
              }
            })
          },
          toggle() {
            this.isShowCollapse = !this.isShowCollapse

            if (this.active == 0) {
              this.queryParam.newed = null
              this.queryParam.recommended = true
            } else {
              this.queryParam.recommended = null
              this.queryParam.newed = true
            }
            this.getListProducts()
          },
          getBanner(shopId) {
            var vm = this;
            var param = {
              bannerType: 1,
              channel: 0,
              shopId: shopId
            }
            common('getBanner')(param, function (ret) {
              vm.listBanner = ret.data
              vm.listBanner.map(item => {
                  if (item.videoId) {
                      common("getVideoPlay")(item.videoId, (ret) => {
                          var videoId = ret.data.videoBase.videoId
                          var index = vm.listBanner.findIndex(
                              target => {
                                  return target.videoId == videoId
                              })
                          vm.$set(vm.listBanner[index], 'playURL',
                              ret.data.playInfoList[0].playURL
                          )
                      })
                  }
              })
            })
          },
          getListProducts() {
            var vm = this;
            index.product("getListProducts")(vm.queryParam, function (ret) {
              vm.listproduct = ret.data.list
            })
          }

        },
      })
      api.addEventListener({
        name: 'openCollapse'
      }, function (ret, err) {
        vm.isShowCollapse = !vm.isShowCollapse
      });
      api.setRefreshHeaderInfo({
        bgColor: '#f7f7f7',
        textDown: '下拉更新有惊喜',
        textUp: '松开可以刷新'
      }, function (ret, err) {
        vm.getListProducts()
      });
      // 上拉加载
      api.addEventListener({
        name: 'scrolltobottom',
        extra: {
          threshold: -10
        }
      }, function (ret, err) {

      });
    }
  </script>
</body>

</html>
